// 
// elements.js
// 海石后台管理
// 
// 2024/12/21.
//

import * as uuid from 'uuid';

export const getText1 = (rowIndex, columnIndex, isTableColumn) => {
    return $lodash.cloneDeep({...Text, rowIndex, columnIndex, isTableColumn, id: uuid.v4()})
}

const Flex = {
    name: "容器",
    type: "Flex1",
    icon: "bi-aspect-ratio",
    styleConfig: {
        width: "100%",
        height: "120px",
        display: "flex",
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "flex-start",
        flexWrap: "warp",
        boxSizing: "border-box",
        padding: "10px",
        backgroundColor: "#f0f0f0",
    },
    children: []
}

const Text = {
    // 组件名称
    name: "文本",
    // 组件类型
    type: "Text1",
    // 组件图标
    icon: "bi-fonts",
    // 是否是表格中的单元格
    isTableColumn: false,
    // 组件样式
    styleConfig: {
        fontSize: "18px",
        color: "#333",
        fontWeight: "normal",
    },
    // 组件数据
    dataConfig: {
        // 数据绑定方式 static 静态数据 dynamic 动态数据
        bindType: "static",
        // 数据内容
        value: "文本",
    }
}

const Picture = {
    name: "图片",
    type: "Picture1",
    icon: "bi-card-image",
    styleConfig: {
        width: "100px",
        height: "60px",
    },
    dataConfig: {
        bindType: "static",
        value: "",
    }
}
/**
 * 生成table 列
 * @param rowIndex
 * @param columnIndex
 * @returns {{}}
 */
export const getTableColumn = (rowIndex, columnIndex) => {
    return {
        type: 'TableColumn1',
        name: `${columnIndex}列`,
        id: uuid.v4(),
        rowIndex,
        columnIndex,
        styleConfig: {
            boxSizing: "border-box",
            borderColor: "#333",
            borderCollapse: "collapse",
        },
        children: [
            getText1(rowIndex, columnIndex, true),
        ]
    }
}
/**
 * 生成table 行
 * @param rowIndex
 * @returns {{type: string, name: string, id: (`${string}-${string}-${string}-${string}-${string}`|*|string), rowIndex, styleConfig: {}, children: ({}|{type: string, name: string, id: (`${string}-${string}-${string}-${string}-${string}`|*|string), rowIndex, styleConfig: {}, children})[]}}
 */
export const getTableRow = (rowIndex) => {
    return {
        type: 'TableRow1',
        name: `${rowIndex}行`,
        id: uuid.v4(),
        rowIndex,
        styleConfig: {
            boxSizing: "border-box",
        },
        children: []
    }
}



const Table = {
    name: "表格",
    type: "Table1",
    icon: "bi-grid-3x3",
    styleConfig: {
        width: "100%",
        minHeight: "20px",
        boxSizing: "border-box",
        borderColor: "#333",
        borderCollapse: "collapse",
    },
    columnStyleConfig: {
        boxSizing: "border-box",
        borderColor: "#333",
        borderCollapse: "collapse",
        fontSize: "18px",
        color: "#333",
        fontWeight: "normal",
        padding: "7px",
    },
    dataConfig: {
        rowCount: 2,
        columnCount: 2
    },
    children: [{...getTableRow(0), children: [getTableColumn(0, 0), getTableColumn(0, 1)]}, {...getTableRow(1), children: [getTableColumn(1, 0), getTableColumn(1, 1)]}]
}

/**
 * 生成tableList 列
 * @param rowIndex
 * @param columnIndex
 * @returns {{}}
 */
export const getTableListColumn = (rowIndex, columnIndex) => {
    return {
        type: 'TableListColumn1',
        name: `${columnIndex}列`,
        id: uuid.v4(),
        rowIndex,
        columnIndex,
        // 当前列是合并列
        isMerge: false,
        styleConfig: {
            boxSizing: "border-box",
            borderColor: "#333",
            borderCollapse: "collapse",

        },
        children: [
            getText1(rowIndex, columnIndex, true),
        ]
    }
}

const TableList = {
    name: "列表",
    type: "TableList1",
    icon: "bi-list-ol",
    styleConfig: {
        width: "100%",
        minHeight: "20px",
        boxSizing: "border-box",
        borderColor: "#333",
        borderCollapse: "collapse",
    },
    columnStyleConfig: {
        boxSizing: "border-box",
        borderColor: "#333",
        borderCollapse: "collapse",
        fontSize: "18px",
        color: "#333",
        fontWeight: "normal",
        padding: "7px",
    },
    dataConfig: {
        bindType: "static",
    },
    children: [
        getTableListColumn(0, 0), getTableListColumn(0, 1)
    ]
}

export const elementsSource = [
    Flex,
    Text,
    Picture,
    Table,
    TableList
]